<template>
	<div class="main" id="main_finance_manager">
		<div class="main-hd"><h2>dpd统计</h2></div>
		<div class="main-bd">
			<div class="content-wrap" id="VuePayment_content">
				<DatePicker
					v-model="dateValue"
					type="daterange"
					format="yyyy-MM-dd"
					:options="disDate"
					@on-change="timeChange"
					placeholder="请选择日期"
					style="width: 200px"
					class="mr10"
				></DatePicker>
				<Select v-model="investorId" style="width: 200px;" class="mr10" filterable>
					<Option
						v-for="(item, index) in investorList"
						:key="index"
						:value="item.investorId">{{ item.investorName }}</Option>
				</Select>

				<Select v-model="loanProductNo" style="width: 200px;" class="search-col">
					<Option
					v-for="(item, index) in loanProductNoList"
					:key="index"
					:value="item.loanProductNo"
					>{{ item.name }}</Option>
				</Select>

				<div class="list">
					<table class="table table-hover table-condensed" border>
						<thead>
							<tr>
								<td>日期</td>
								<td>贷款产品</td>
								<td>支用金额</td>
								<td>已还金额</td>
								<td>合同还款率</td>
								<td>dpd0</td>
								<td>dpd1</td>
								<td>dpd2</td>
								<td>dpd3</td>
								<td>dpd7</td>
								<td>dpd14</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in tableList" :key="index"> 
								<td>{{item.date}}</td>
								<td>{{ item.loanProductNo | productFormatter }}</td>
								<td>{{ toThousands(item.sumPrimeCost) }}</td>
								<td>{{ toThousands(item.sumRepayAmount) }}</td>
								<td>{{item.repayRate}}</td>
								<td>{{item.dpd0}}</td>
								<td>{{item.dpd1}}</td>
								<td>{{item.dpd2}}</td>
								<td>{{item.dpd3}}</td>
								<td>{{item.dpd7}}</td>
								<td>{{ item.dpd14 }}</td>
							</tr>
						</tbody>
					</table>
					<div style="margin-top:12px; text-align: right;">
						<Page
							:total="loan_list_size"
							:current.sync="page"
							:page-size-opts="[10, 20, 40, 80, 100]"
							show-total
							show-elevator
							show-sizer
							@on-change="pageChange"
							@on-page-size-change="handleSizeChange"
							style="margin: 12px 0;"
						></Page>
					</div>
					<Button type="primary" @click="exportData">
						<Icon type="ios-download-outline"></Icon> 导出数据
					</Button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import qs from 'qs';
import mixin1 from '../views/report/mixin';
import mixin2 from '../libs/mixins.js';
import { dateFormat } from '../static/tools';

export default {
	name: 'dpdCount',
	mixins: [ mixin1, mixin2 ],
	data() {
		return {
			platformId: null,
			tableList: [],
			channelList: [],
			dateValue: [],
			beginDate: '',
			endDate: '',
			investorId: -1,
			managerId: 'default1',
			options: null,
			managerList: [],
			type: 1,
			myState: -1,
			investorList: [],
			loan_list_size: 0,
			loan_list_page: 1,
			loading: true,
			page: 1,
			pageSize: 10,
			disDate: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now();
				}
			},
			loanProductNo: 'pn_1000_7_20',
			loanProductNoList: []
		}
	},
	created () {
		this.getLoanProductsList();
		this.getAllInverstorList();
	},
	methods: {
		getAllInverstorList () {
			this.$http.post('/helsinki/admin/investor/getAllInvestorList')
			.then(({ data: { data, errcode, info } }) => {
				if (errcode === 0) {
					this.investorList = data.list;
				}
			}, error => {
				console.log(error);
			});
		},
		getPlatformList () {
			this.$http.post('/helsinki/admin/daoliu/getPlatformList')
			.then(({ data: { errcode, info, data } }) => {
				if (errcode == 0) {
					this.channelList = data.list;
				}
			}, error => {
				console.log(error);
			})
		},
		getTableDate() {
			let myparam = {};
			myparam.beginDate = this.beginDate;
			myparam.endDate = this.endDate;
			myparam.pageSize = this.pageSize;
			myparam.page = this.page;
			myparam.investorId = this.investorId;
			myparam.loanProductNo = this.loanProductNo;

			this.$http.post('/helsinki/admin/report/getDpdList', myparam)
			.then(({ data: { errcode, info, data } }) => {
				if (errcode == 0) {
					this.tableList = data.list;
					this.loan_list_size = data.size;
					this.loan_list_page = myparam.page;
				}
			}, error => {
				console.log(error);
			})
		},
		timeChange(e) {
			if (typeof(e) == "undefined") {
				this.beginDate = e[0];
				this.endDate = e[1];
			} else if (typeof(e) == "object") {
				this.beginDate = e[0];
				this.endDate = e[1];
			}
			this.dateValue = e;
			this.page = 1;
			this.getTableDate();
		},
		pageChange(val) {
			this.page = val;
			this.getTableDate();
		},
		handleSizeChange (val) {
			this.pageSize = val;
			this.getTableDate();
		},
		exportData () {
			let params = qs.stringify({
				platformId: '',
				investorId: this.investorId,
				loanProductNo: this.loanProductNo,
				beginDate: this.beginDate,
				endDate: this.endDate,
				methods: ['getDpdList'],
				includeFields: [
					['date', 'loanProductNo', 'sumPrimeCost', 'sumRepayAmount', 'repayRate', 'dpd0', 'dpd1', 'dpd2', 'dpd3', 'dpd7', 'dpd14']
				]
			});
			location.href = `/helsinki/admin/report/export-excel?${params}`;
		},
		toThousands (value) {
			return this.thousandsFormatter(parseFloat(value));
		},
		// 获取产品列表
		getLoanProductsList () {
			this.$http.post('/helsinki/admin/loan-products')
			.then(({ data: { data, errcode, info } }) => {
				if (errcode === 0) {
					let res = data.data;
					this.loanProductNoList = res.filter(item => item.loanProductNo !== 'all');
				}
			}, error => {
				console.log(error);
			})
		}
	},
	mounted() {
		let now = Date.now();
		let beforeTenDay = now - 24 * 60 * 60 * 1000 * 9;

		this.endDate = dateFormat(now, 'yy-mm-dd');
		this.beginDate = dateFormat(beforeTenDay, 'yy-mm-dd');
		this.dateValue = [this.beginDate, this.endDate];
    this.getTableDate();
  },
	watch: {
		investorId() {
			this.page = 1;
			this.getTableDate();
		},
		loanProductNo() {
			this.page = 1;
			this.getTableDate();
		}
	}
}
</script>

<style scoped>
	@import '../static/style.css';
	@import '../static/common.scss';

	.finance_header {
		text-align: center;
		margin-bottom: 15px;
		
	}
	.finance_header a {
		font-size: 17px;
		color: #337ab7 !important;
	}
	.list {
		margin-top: 20px;
	}
	
	.finance_header .headerDiv {
		border-right: 3px solid #009999;
		text-align: center;
	}
</style>